<template>
    <div>
        <nav-bar>
            <template v-slot:left></template>
            <template v-slot:default>注册帐号</template>
            <template v-slot:right></template>
        </nav-bar>
        <div class="reg">
            <van-image
            width="100"
            height="100"
            lazy-load
            :src="imgsrc"
            />

            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                    v-model="name"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <van-field
                    v-model="password_confirmation	"
                    type="password"
                    name="确认密码"
                    label="确认密码"
                    placeholder="确认密码"
                    :rules="[{ required: true, message: '请填写一样密码' }]"
                    />
                    <van-field
                    v-model="email"
                    name="邮箱"
                    label="邮箱"
                    placeholder="邮箱"
                    :rules="[{ required: true, message: '请填写邮箱' }]"
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <div class="link-login" @click="$router.push({path:'/login'})">
                        帐号登陆
                    </div>
                    <van-button round block type="primary" color="var(--color-tint)" native-type="submit">
                    提交
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import { reactive,toRefs } from 'vue';
import { register } from 'network/user';
import { Notify,Toast } from 'vant';
import { useRouter } from 'vue-router';
export default {
    name:"Register",
    components:{
        NavBar
    },
    data(){
        return{
            imgsrc:require('assets/logo.png')
        }
    },
    setup() {
        const router = useRouter();
        const userinfo = reactive({
            name:'',
            password:'',
            password_confirmation:'',
            email:''
        })

        const onSubmit = ()=>{
            //先验证
            if(userinfo.password != userinfo.password_confirmation){
                Notify('两次输入密码不一样');
            }else{
                //提交给服务器
                register(userinfo).then(res=>{
                   if(res.status == '201') {
                       Toast.success('会员注册成功');
                       setTimeout(()=>{
                           router.push({path:'/login'});
                       },1000)
                   }

                   userinfo.password='';
                   userinfo.password_confirmation='';
                })
            }

            
        }

        return{
            ...toRefs(userinfo),
            onSubmit
        }
    },
}
</script>

<style scoped>
.reg{
    margin-top: 150px;
}
.link-login{
    font-size: 18px;
    color: blueviolet;
    margin-bottom: 30px;
}
</style>